<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      size="mini"
      :header-cell-style="headercellstyle"
    >
      <el-table-column align="center" prop="realName" :label="$t('institutionSetting.jigou23')" />
      <el-table-column align="center" prop="mobile" :label="$t('institutionSetting.jigou24')" />
      <el-table-column align="center" prop="email" :label="$t('institutionSetting.jigou25')" />
      <el-table-column align="center" prop="roleName" :label="$t('institutionSetting.jigou26')">
        <template slot-scope="scope">
          {{
              scope.row.owner == 1
                ? $t('members.chengyuan10')
                : scope.row.roleName === '普通成员'
                ? $t('members.chengyuan57')
                : $t('members.chengyuan58')
            }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('institutionSetting.jigou28')" min-width="150">
        <template slot-scope="scope" style="display: flex; justify-content: flex-start">
          <div v-if="user_owner == 1 && scope.row.owner != 1">
            <el-button
              type="text"
              :size="tableButtonSize"
              @click="quanxian(scope.row.userId, scope.row.userMenuList, scope.row.roleId)"
              >{{ $t('add.add021') }}</el-button
            >
          </div>
          <div
            v-if="
              (user_owner != 1 &&
                user_roleId == 2 &&
                scope.row.roleId != 2 &&
                scope.row.roleId != 4 &&
                scope.row.owner != 1) ||
              (user_owner != 1 &&
                user_roleId == 4 &&
                scope.row.roleId != 2 &&
                scope.row.roleId != 4 &&
                scope.row.owner != 1)
            "
          >
            <el-button
              type="text"
              :size="tableButtonSize"
              @click="quanxian(scope.row.userId, scope.row.userMenuList, scope.row.roleId)"
              >{{ $t('add.add021') }}</el-button
            >
          </div>
          <!-- <el-dropdown>
                        <el-button type="text" :size="tableButtonSize">权限管理</el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>授权</el-dropdown-item>
                            <el-dropdown-item>设为管理员</el-dropdown-item>
                            <el-dropdown-item>设为普通成员</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown> -->
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 16px 0; float: right">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      top="20vh"
      :title="$t('add.add021')"
      :visible.sync="dialogShow"
      width="700px"
      @close="cancleHandle"
      :close-on-click-modal="false"
    >
      <div>
        <el-tree
          ref="tree"
          :data="menuList"
          show-checkbox
          default-expand-all
          node-key="id"
          :default-checked-keys="userMenuList"
          highlight-current
          :props="{ label: 'name', children: 'children' }"
          @check-change="handleCheckChange"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button plain :size="optionButtonSize" @click="cancleHandle">{{
          $t('add.add203')
        }}</el-button>
        <el-button type="primary" :size="optionButtonSize" @click="submitHandle">{{
          $t('add.add81')
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BLZMasterMemberpermissions',

  data() {
    return {
      tableData: [{ date: '1', date1: '1', date2: '1', date3: '1', date4: '1' }],
      form: {
        name: '',
        deptName: '', // 所属机构
        realName: '', // 名称
        mobile: '', // 手机
        createDate: '',
      },
      currentPage: 1, // 默认第1页
      total: 0, // 总条数
      limit: 20, // 每页条数
      userId: '',
      menuList: [],
      newMenuList: [],
      dialogShow: false,
      userMenuList: [],
      user_owner: null,
      user_roleId: '', // 权限id
    };
  },

  created() {
    this.getMemberList();
    // this.getMenuSelect()
  },
  mounted() {
    this.user_roleId = localStorage.getItem('user_roleId');
    this.user_owner = localStorage.getItem('user_owner'); // 1为所有者
  },
  methods: {
    // 拿表单数据
    getMemberList() {
      this.$http
        .get(`/sys/organized/getMemberList?type=1&page=${this.currentPage}&limit=${this.limit}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;
            this.total = res.data.total;
            if(this.tableData.length <= 0 && this.currentPage > 1){
              this.currentPage -= 1;
              this.getMemberList();
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 拿权限数据
    getMenuSelect(roleId) {
      this.$http
        .get(`/sys/menu/select?roleId=${roleId}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.menuList = res.data;
            this.menuList.forEach((item) => {
             if(item.name === '查看合作伙伴'){
              item.name = this.$t("members.chengyuan64");
             }else if(item.name === '查看机构成员'){
              item.name = this.$t("members.chengyuan65");
             }else if(item.name === '管理设备信息'){
              item.name = this.$t("members.chengyuan66");
             }else if(item.name === '查看所有案例订单'){
              item.name = this.$t("members.chengyuan67");
             }
            });
            this.dialogShow = true;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    quanxian(id, userMenuList, roleId) {
      this.getMenuSelect(roleId);
      this.userId = id;
      this.userMenuList = userMenuList;
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(this.userMenuList);
      });
    },
    cancleHandle() {
      this.dialogShow = false;
      this.userId = '';
      this.newMenuList = [];
      this.userMenuList = [];
    },
    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.newMenuList.push(data.id);
      } else {
        this.newMenuList.forEach((item, index) => {
          if (item == data.id) {
            this.newMenuList.splice(index, 1);
          }
        });
        if (this.userMenuList.length > 0) {
          this.userMenuList.forEach((m, n) => {
            if (m == data.id) {
              this.userMenuList.splice(n, 1);
            }
          });
        }
      }
    },
    submitHandle() {
      // if (this.newMenuList.length == 0) {
      //     return this.$message.error('请选择权限')
      // }
      if (this.userMenuList.length > 0) {
        this.newMenuList = this.newMenuList.concat(this.userMenuList);
      }
      this.$http
        .put('/sys/role', { userId: this.userId, menuIdList: this.newMenuList })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.getMemberList();
            this.$message.success(this.$t('institutionSetting.jigou76'));
            this.dialogShow = false;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getMemberList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getMemberList();
    },
  },
};
</script>

<style lang="scss" scoped></style>
